<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="购买/赠送:">
                        <el-select v-model="searchSource" placeholder="请选择" 
                            size="small" class="w140" clearable
                        >
                            <el-option key="1" label="购买" value="1">
                            </el-option>
                            <el-option key="2" label="赠送" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="支付状态:">
                        <el-select v-model="searchType" placeholder="请选择" 
                            size="small" class="w140" clearable
                        >
                            <el-option key="1" label="未支付" value="1">
                            </el-option>
                            <el-option key="2" label="已支付" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item class="teAliLeft">
                        <el-button type="primary" @click="cliScreen" size="small" class="mr5">
                            立即筛选
                        </el-button>
                        <el-button @click="cliEmpty" size="small">
                            清空
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tag type="success" class="mb5">
            会员卡价格合计：¥{{ purchaseAmountTo ? purchaseAmountTo : '0.00' }}
        </el-tag>
        <el-table :data="tempList1" border class="wPer100">
            <el-table-column prop="id" label="购买id" width="65">
            </el-table-column>
            <el-table-column prop="mid" label="用户id" width="65">
            </el-table-column>
            <el-table-column prop="phone" label="用户手机号" width="115">
            </el-table-column>
            <el-table-column label="订单号" width="190">
                <template slot-scope="scope">
                    {{ 
                        scope.row.source == 1 ? scope.row.out_trade_no :
                        scope.row.source == 2 ? '无' : scope.row.source
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="month" label="购买时长/月" width="100">
            </el-table-column>
            <el-table-column prop="price" width="95"
                label="会员卡价格"
            >
            </el-table-column>
            <el-table-column label="购买/赠送" width="85">
                <template slot-scope="scope">
                    {{ 
                        scope.row.source == 1 ? '购买' :
                        scope.row.source == 2 ? '赠送' : scope.row.source
                    }}
                </template>
            </el-table-column>
            <el-table-column label="支付状态" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.type == 1 ? '未支付' :
                        scope.row.type == 2 ? '已支付' : scope.row.type
                    }}
                </template>
            </el-table-column>
            <el-table-column label="领取状态" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.source == 2 ?
                            (scope.row.status == 1 ? '未领取' :
                            scope.row.status == 2 ? '已领取' : scope.row.status)
                        :
                        scope.row.source == 1 ? '无' : scope.row.source
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="创建时间">
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage1" :total="total1"
                :page-sizes="[10]" :page-size="pageSize1"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange1"
            />
        </div>
    </div>
</template>
<script>
import { getMemberCardGetList } from '@s/api'
export default {
    data() {
        return {
            currentPage1: 1, pageSize1: 10, tempList1: [], total1: 0,
            searchSource: '', searchType: '', purchaseAmountTo: 0
        }
    },
    mounted() {
        this.getDataList1();
    },
    methods: {
        getDataList1() {
            getMemberCardGetList({
                token: this.$store.getters.token,
                page: this.currentPage1 - 1,
                number: this.pageSize1,
                source: this.searchSource,
                type: this.searchType
            }).then(res => {
                console.log(11, res)
                this.tempList1 = res.data.data;
                this.total1 = res.data.count;
                this.purchaseAmountTo = res.data.amount;
            })
        },
        handleCurrentChange1(currentPage1) {
            this.currentPage1 = currentPage1;
            this.getDataList1();
        },
        cliScreen() {
            this.currentPage1 = 1;
            this.getDataList1();
        },
        cliEmpty() {
            this.searchSource = '';
            this.searchType = '';
        },
    }
}
</script>